1-Controles HTML comuns
Quanto aos controles HTML comuns que estão dentro da caixa de ferramentas, item HTML temos:
| Controle HTML | Utilidade | Como é exibido | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Ponteiro | Não é um elemento HTML-Aponta para os componentes da página | ||||||||||
| Input(Button) | O famoso botão HTML |
|
|||||||||
| Input(Reset) | Ao pressionar este botão todos os campos de um form terão seus valores default novamente carregados. |
|
|||||||||
| Input(Submit) | Ao pressionar este botão os dados dos controles dentro do form serão enviados ao servidor. Chamamos isto de submit no caso de HTML mas no caso ASP NET chamamos de Post-Back. |
|
|||||||||
| Input(text) | É a famosa caixa de entrada de texto do browser. |
|
|||||||||
| Input(File) | É o controle que permite fazer file-upload (enviar arquivos) ao servidor. Note que este controle é especial e, em HTML comum, tem um uso específico que não admite outros controles junto com ele. |
|
|||||||||
| Input(Password) | Famosa entrada de senha do HTML. É renderizada como uma caixa de texto comum mas quando o usuário digita uma tecla qualquer dentro dessa caixa o caractere não é exibido mas sim um asterisco em seu lugar. Podemos ter restrições contra copy-paste neste campo por motivos de segurança. |
(password=senha) |
|||||||||
| Input(CheckBox) | O input type checkbox do html é exibido como uma caixa quadrada muito pequena como aquelas de ticar coisas indicando uma opção. Ao clicar é exibido um V dentro do controle e ao ser clicado novamente este V some. |
|
|||||||||
| Input(Radio) |
Muito parecido com o CheckBox com duas diferenças básicas : primeira que é exibido
com uma caixa redonda que ao clicar tem seu interior pintado de preto. Contudo não pode
ser 'desclicado'. Se for um conjunto de Radio-buttons eles podem ser agrupados e, neste caso, só um poderá ser selecionado. É uma caixa de opções onde só um ítem pode ser selecionado. Ao selecionar o segundo, o primeiro é limpo. |
|
|||||||||
| Input(Hidden) | Muito utilizado quando precisamos enviar dados ao cliente para serem recuperados depois num 'submit' ou 'postback' do form. Os dados dentro de um input hidden não são exibidos ao usuário mas ficam dentro da página web e podem ser facilmente manipulados no ambiente de depuração do browser. |
Input type Hidden não exibe nada |
|||||||||
| TextArea | É uma caixa de texto grande, com multiplas linhas. O input type text exibe o conteúdo em apenas uma linha de texto. Se o texto for grande muitas vezes é melhor usar o TextArea porque ele define uma caixa de texto bem maior o que torna o texto mais visível. |
|
|||||||||
| Table | É uma tabela comum que sequer segue a convenção html5 ( com thead, tbody). Contudo é prática porque a gente insere o controle e vai fazer menos alterações que colocando tudo na mão. |
|
|||||||||
| Image | É a famosa imagem HTML. |
 |
|||||||||
| Select | É o famoso ComboBox HTML | ||||||||||
| Horizontal Rule | É a linha divisória HTML |
|
|||||||||
| Div | Separa o conteúdo de uma página HTML. Hoje em dia substitui com muitas vantagens a tag table. |
Texto antes da div Texto dentro da div Texto depois da div
|
Código dos controles exibidos acima :
<input id="Button1" type="button" value="Button1" /> Input type button<br />
<input id="Reset1" type="reset" value="Reset1" /> Input type reset <br />
<input id="Submit1" type="submit" value="Submit1" />Input type submit<br />
<input id="Text1" type="text" placeholder="Text1" />Input type text<br />
<input id="File1" type="file" /> Input type File<br />
<input id="Password1" type="password" /> Input type senha(password)<br />
<input id="Checkbox1" type="checkbox" value="Checkbox1" />Input type CheckBox<br />
<input id="Radio1" type="radio" value="Radio1" />Input type Radio Button<br />
<input id="Hidden1" type="hidden" /> Input type Hidden<br />
<textarea id="TextArea1" cols="20" rows="2">Input type TextArea</textarea><br />
<table style="width: 100%;" border="1">
<tr>
<td>Linha1-Col1</td>
<td>Linha1-Col2</td>
<td>Linha1-Col3</td>
</tr>
<tr>
<td>Linha2-Col1</td>
<td>Linha2-Col2</td>
<td>Linha2-Col3</td>
</tr>
<tr>
<td>Linha3-Col1</td>
<td>Linha3-Col2</td>
<td>Linha3-Col3</td>
</tr>
</table>
<br />
<img alt="" src="../navegar3.png" /> Tag Img<br />
Tag Select:
<select id="Select1">
<option>Opção1</option>
<option>Opção2</option>
<option>Opção3</option>
</select>
<hr />
Texto antes da div<div> Texto dentro da div</div> Texto depois da div
Como é exibido:
Os controles acima foram 'renderizados' por uma página que está formatada pelo bootstrap. Numa página comum HTML eles serão mais feios ainda.
Importante : Todo desenvolvedor ASP NET deve conhecer estes controles bem como usá-los da maneira correta. São o básico do básico.